<template>
  <div class="editor-container">
    <div :id="id">
      <vxe-radio-group v-model="val" v-if="type==='radio'" :disabled="disabled" @change="change">
        <vxe-radio  v-for="item in opitons" :label="item.value" :content="item.label"></vxe-radio>
      </vxe-radio-group>
      <vxe-checkbox-group v-model="val" v-else-if="type==='checkbox'" :disabled="disabled" @change="change">
        <vxe-checkbox v-for="item in opitons" :label="item.value" :content="item.label"></vxe-checkbox>
      </vxe-checkbox-group>
      <vxe-select v-else-if="disabled=='true'" v-model="val"  :multiple="type==='selects'" transfer size="small" clearable @change="change" @clear="change">
        <vxe-option v-for="item in opitons"  :value="item.value" :label="item.label" ></vxe-option>
      </vxe-select>
      <vxe-select v-else v-model="val" transfer size="small" :disabled="true" clearable @change="change" @clear="change">
        <vxe-option v-for="item in opitons"  :value="item.value" :label="item.label" ></vxe-option>
      </vxe-select>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
import { randomString } from '/@/utils/ruoyi';
import XEUtils from "xe-utils";

// 定义接口来定义对象的类型
interface sxSelect {
  val:any,
}

export default defineComponent({
  name: 'sxSelect',
  props: {
    // 节点 id
    opitons:{
      type:Array,
    },
    id: {
      type: String,
      default: () => 'between_'+randomString(6),
    },
    multiple: {
      type: Boolean,
      default: () => false,
    },
    disabled: {
      type: Boolean,
      default: () => "true",
    },

    // 内容框默认 placeholder
    placeholder: {
      type: String,
      default: () => '请选择',
    },

    type: {
      type: String,
      default: () => 'select',
    },
    modelValue: String,
  },
  setup(props, { emit }) {
    const state = reactive<sxSelect>({
      val: null
    });
    // 初始化富文本
    // https://doc.wangeditor.com/

    const change=()=>{
      let val=state.val
        if(['checkbox','selects'].includes(props.type)){
          val=state.val.join(',')

      }
      emit('update:modelValue', val);
    }
    // 页面加载时
    onMounted(() => {
      state.val=props.modelValue?props.modelValue:null
    });
    // 监听双向绑定值的改变
    // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
    watch(
        () => props.modelValue,
        (value) => {
          console.log(value);
          state.val=value===''?null:value
          if(['checkbox','selects'].includes(props.type)){
            if (value!==''){
              state.val= XEUtils.toString(value).split(",")
            }
          }
        },{deep: true}
    );

    return {
      ...toRefs(state),change
    };
  },
});
</script>
